<ui:composition 
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:meta="http://deltaset.org/deltaset-meta"
	xmlns:mi="http://java.sun.com/jsf/composite/deltaset.meta/internal"
    xmlns:composite="http://java.sun.com/jsf/composite">
    <composite:interface componentType="org.deltaset.metaCollection">
        <composite:attribute name="label"/>
		<composite:attribute name="formId"/>		
        <composite:attribute name="values" type="java.util.Collection" required="true"/>
        <composite:attribute name="meta" required="true"/>
        <composite:attribute name="metaField" required="true"/>
    </composite:interface>

    <composite:implementation>
        <c:set var="removable" value="#{cc.isRemovableCollection(cc.attrs.metaField)}"/>
        <c:set var="orderable" value="#{cc.isOrderableCollection(cc.attrs.metaField)}"/>
        <h:outputLabel for="text" value="#{cc.attrs.label}:" rendered="#{not empty cc.attrs.label}" styleClass="ds-label"/>
        <h:panelGroup layout="block" id="collection">
            <c:if test="#{not empty cc.attrs.label}">
                <f:attribute name="styleClass" value="ds-field"/>
            </c:if>
            <ul id="#{cc.clientId}:list" class="ds-sortable">
                <ui:repeat value="#{cc.convertToList(cc.attrs.values)}" var="elm" rendered="#{not empty cc.attrs.values}" varStatus="status">
                    <li class="ui-widget ui-state-default ui-corner-all">
                        <span class="ds-sortable-out">                            
							    <span class="ds-sortable-in">#{cc.attrs.meta.modelTitle(elm)}</span>                           
							<c:if test="#{removable}">
                                <h:commandButton value="X"
                                                 immediate="true"
                                                 styleClass="ds-sortable-delete"
                                                 onclick="return deltaset.confirm(this)"
                                                 action="#{cc.removeElement(cc.attrs.values,elm)}" >
                                    <f:ajax execute="@all" render=":#{cc.clientId}:collection"/>
                                </h:commandButton>
                            </c:if>
                        </span>
                    </li>
                </ui:repeat>
            </ul>
            <h:outputText value="&#160;" rendered="#{empty cc.attrs.values}"/>


            <h:inputText id="startIndex" value="#{cc.sourceIndex}" style="display:none"/>
            <h:inputText id="stopIndex" value="#{cc.targetIndex}" style="display:none"/>

            <h:commandButton id="executeSort"
                             value="moveTo;"
                             style="display:none"							 
                             actionListener="#{cc.moveTo(cc.attrs.values)}">
                <f:ajax execute="startIndex stopIndex @this" render=":#{cc.clientId}:collection"/>
            </h:commandButton>


            <h:panelGroup render="#{orderable||removable}">
                <style>
                    .ds-sortable { list-style-type: none; margin: 0; padding: 0; width: 95%; }
                    .ds-sortable li { margin: 5px; padding: 5px; height: 28px; }                   
                    .ds-sortable .ui-state-highlight { height: 28px;  }
                    .ds-sortable .ds-sortable-out{display:block;position:relative;}
                    .ds-sortable .ds-sortable-in{margin-top:5px;display:inline-block}
                    .ds-sortable .ds-sortable-delete{position:absolute;right:0;margin:0;}
                </style>
                <c:if test="#{orderable}">
                    <script  type="text/javascript">
                        jQuery(document).ready(function(){
                            jQuery().deltasetSortableList('#{cc.clientId}');
                        });
                    </script>
                </c:if>
                <c:if test="#{removable}">
                    <script  type="text/javascript">
                        jQuery( '.ds-sortable-delete' ).button({
                            text: false,
                            icons: {
                                    primary: 'ui-icon-close'
                            }
                    })
                    </script>
                </c:if>
            </h:panelGroup>
        </h:panelGroup>

    </composite:implementation>
</ui:composition>